<template>
  <div class="team-page section-padding">
    <div class="container mx-auto px-4">
      <!-- 核心成员区域 -->
      <div class="mb-12">
        <h3 class="text-xl font-bold mb-6 text-center">核心成员</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div v-for="member in coreMembers" :key="member.id"
            class="team-card bg-white rounded-lg shadow hover:shadow-lg transition-all p-4">
            <img :src="member.avatar" alt="核心成员头像" class="w-full h-48 object-cover rounded mb-4">
            <h4 class="font-bold text-lg mb-2">{{ member.name }}</h4>
            <p class="text-gray-600 mb-2">{{ member.title }}</p>
            <p class="text-gray-700 text-sm">{{ member.desc }}</p>
          </div>
        </div>
      </div>

      <!-- 学生风采区域 -->
      <div>
        <h3 class="text-xl font-bold mb-6 text-center">学生风采</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
          <div v-for="student in students" :key="student.id"
            class="student-card bg-white rounded-lg shadow hover:shadow-lg transition-all p-3 text-center">
            <img :src="student.avatar" alt="学生头像" class="w-24 h-24 mx-auto object-cover rounded-full mb-2">
            <h4 class="font-bold text-base mb-1">{{ student.name }}</h4>
            <p class="text-gray-600 text-sm mb-1">{{ student.title }}</p>
            <p class="text-blue-600 text-sm cursor-pointer hover:underline">查看详情</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuestTeam',
  data() {
    return {
      coreMembers: [
        {
          id: 1,
          name: '张明',
          title: '团队负责人/PI',
          desc: '研究方向：低空智联网、多模态算法。主持国家级项目3项，发表高水平论文20余篇。',
          avatar: 'https://picsum.photos/300/300?random=1'
        },
        {
          id: 2,
          name: '李华',
          title: '副教授',
          desc: '研究方向：低空态势感知、高可靠通信。参与多项省部级项目，专注于低空通信安全技术。',
          avatar: 'https://picsum.photos/300/300?random=2'
        },
        {
          id: 3,
          name: '王建国',
          title: '研究员',
          desc: '研究方向：低空物流技术、网络规划优化。拥有丰富的工业界经验，主导多项产学研合作项目。',
          avatar: 'https://picsum.photos/300/300?random=3'
        },
        {
          id: 4,
          name: '赵婷',
          title: '讲师',
          desc: '研究方向：低空经济发展、行教融合。专注于低空经济政策与产业应用研究，发表多篇政策分析报告。',
          avatar: 'https://picsum.photos/300/300?random=4'
        }
      ],
      students: [
        { id: 1, name: '孙一', title: '博士研究生', avatar: 'https://picsum.photos/100/100?random=5' },
        { id: 2, name: '周二', title: '硕士研究生', avatar: 'https://picsum.photos/100/100?random=6' },
        { id: 3, name: '吴三', title: '硕士研究生', avatar: 'https://picsum.photos/100/100?random=7' },
        { id: 4, name: '郑四', title: '硕士研究生', avatar: 'https://picsum.photos/100/100?random=8' },
        { id: 5, name: '王五', title: '硕士研究生', avatar: 'https://picsum.photos/100/100?random=9' },
        { id: 6, name: '钱六', title: '硕士研究生', avatar: 'https://picsum.photos/100/100?random=10' },
        { id: 7, name: '孙七', title: '本科生', avatar: 'https://picsum.photos/100/100?random=11' },
        { id: 8, name: '周八', title: '本科生', avatar: 'https://picsum.photos/100/100?random=12' },
        { id: 9, name: '吴九', title: '本科生', avatar: 'https://picsum.photos/100/100?random=13' }
      ]
    }
  }
}
</script>

<style scoped>
.section-padding {
  padding: 2rem 0;
}

.team-card,
.student-card {
  transition: all 0.3s ease;
}

.team-card:hover,
.student-card:hover {
  transform: translateY(-5px);
}
</style>